<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高问题</title>
		<style>
			/* 尺寸问题：屏幕宽高不一致，限定一个宽高范围 
			   min-width属性：最小宽度 {√}    min-height属性：最小高度
			   max-width属性：最大跨度    max-height属性：最大高度*/
			div{
				width: 80%;        /*  默认宽度*/
				min-width: 500px;  /* 内容最小宽度是500px，不可以改变 */
				max-width: 600px;  /* 页面尺寸 ：最小是500px，最大是800px，默认是80%*/
				
				/* 定好最小跟最大宽高  pc：80%  300px 
				                    移动端：500~600宽度 */
				height: 300px;
				background: #ffaaff;
			}
			/* html结构    外层div--container  内层div--.box  写lorem 
			   css结构     .conrainer样式   背景颜色#f0f0f0
			                                padding： 200px；
											文本居中
						   .box样式：背景颜色#eee
						             文字改成白色
									 宽度60%
									 宽度范围：500~600宽度【页面不变】
									 margin：auto；*/
		</style>
	</head>
	<body>
		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, nemo dolores? Sint atque expedita officiis, a libero error blanditiis. Nihil corporis magni, tempore corrupti accusantium eligendi commodi illum quo? Quaerat.</div>
	</body>
</html>